<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Clear background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Style
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;

        // Coordinates and scale
        const cx = 250;
        const cy = 200;
        const len = 70; // Represents the distance λ/2
        const headlen = 12;

        // --- Helper function to draw an arrow ---
        function drawArrow(fromx, fromy, tox, toy) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            
            // Line
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();

            // Arrowhead
            ctx.save();
            ctx.translate(tox, toy);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-headlen, headlen / 2);
            ctx.lineTo(-headlen, -headlen / 2);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        }

        // --- Helper function for λ/2 fraction ---
        function drawLambdaFraction(x, y) {
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            ctx.font = 'italic bold 20px serif';
            ctx.fillText('λ', x, y - 8);
            
            ctx.beginPath();
            ctx.moveTo(x - 12, y);
            ctx.lineTo(x + 12, y);
            ctx.stroke();
            
            ctx.font = 'bold 20px serif';
            ctx.fillText('2', x, y + 11);
        }
        
        // --- Main drawing ---

        // Draw vectors originating from B
        drawArrow(cx, cy, cx - len, cy); // Arrow towards A
        drawArrow(cx, cy, cx + len, cy); // Arrow towards C
        drawArrow(cx, cy, cx, cy - len); // Arrow towards D

        // Draw labels for points A, B, C, D
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('A', cx - len - 20, cy + 3);
        ctx.fillText('B', cx - 15, cy + 18);
        ctx.fillText('C', cx + len + 20, cy + 3);
        ctx.fillText('D', cx, cy - len - 20);

        // Draw distance labels λ/2
        drawLambdaFraction(cx - len / 2, cy + 28); // for AB
        drawLambdaFraction(cx + len / 2, cy + 28); // for BC
        drawLambdaFraction(cx + 30, cy - len / 2); // for BD
        
        // Define receiver positions
        const r1x = cx - 2.5 * len;
        const r1y = cy - 0.9 * len;
        const r2x = cx + 0.2 * len;
        const r2y = cy + 1.2 * len;

        // Draw receiver R1 (dot and label)
        ctx.beginPath();
        ctx.arc(r1x, r1y, 5, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('R', r1x - 12, r1y + 2);
        ctx.font = 'bold 16px sans-serif';
        ctx.textBaseline = 'bottom';
        ctx.fillText('1', r1x - 10, r1y + 11);
        
        // Draw receiver R2 (dot and label)
        ctx.beginPath();
        ctx.arc(r2x, r2y, 5, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('R', r2x, r2y + 22);
        ctx.font = 'bold 16px sans-serif';
        ctx.textBaseline = 'bottom';
        ctx.fillText('2', r2x + 10, r2y + 31);

        // Draw figure caption
        ctx.font = '20px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 4.2', cx, canvas.height - 30);

    </script>
</body>
</html>